<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信</title>
</head>
<body>
<!--
    父传子是绑定属性，子传父也是属性绑定，
    vue：单向数据流
-->
<div id="app">
    <h1>父：{{content[3]}}</h1>
<!--    sync: 同步-->
    <com :honus="title" :fu.sync="content"></com>
<!--                   这里由原来的事件绑定变成属性绑定，右边也是由方法名变为 变量-->
</div>
<template id="com">
    <div>
        <h2>子：{{honus}}</h2>
        <button @click="dianji">给父组件买辆车</button>
    </div>
</template>
<script src="../vue.js"></script>
<script>
    var com = {
        //有三种接值的写法 第一种
        props:['honus'],
        //第二种
        /*props:{
          honus:String,
        },*/
        //第三种
        /*props:{
            honus:{
                type:String,
            }
        },*/
        data(){
            return{
                //数组
                // cat :['保时捷1','保时捷2','保时捷3','保时捷4']
                //对象
                cat :{
                    vat1:'保时捷1',
                    vat2:'保时捷2',
                },
            }
        },
        methods:{
            dianji(){
                //   实参传值
                // this.$emit('update:fu','保时捷1','保时捷2')
                //   对象传值
                this.$emit('update:fu',this.cat)
                //数组传值
                // this.$emit('update:fu',this.cat)
            }
        },
        template:"#com"
    }
    new Vue({
        el:'#app',
        data(){
            return {
                title:'房子',
                content:''
            }
        },
        components:{
            com,
        },
    //    用属性绑定就不需要methods了
    })
</script>
</body>
</html>